<script>
import * as api from '@/api/organization'

export default {
  name: 'Organization',
  data() {
    return {
      queryForm: {
        name: '',
        department: null,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '员工名称',
          value: '',
          prop: 'name',
          type: 'INPUT',
          emunName: ''
        },
      ],
      buttonloading: false,
      treeData: [],
      userList: [],
      statusActivate: { 1: '在职', 2: '在职', 4: '在职', 5: '不在职', 6: '不在职' },
      total: 0,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      loading: false,
      idArr: []
    }
  },
  created() {
    this.getTree()
    this.getTableListFn()
  },
  methods: {
    getTree() {
      this.buttonloading = true
      api.getTree().then(({ data }) => {
        this.buttonloading = false
        this.treeData = this.handleTree(data)
      })
      this.buttonloading = false
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getTableListFn();
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getTableListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getTableListFn()
    },
    getTableListFn() {
      this.loading = true
      api.getList(this.queryForm).then(({ rows, total }) => {
        this.userList = rows || []
        this.total = +total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleNodeClick(data) {
      this.queryForm.department = data.id == 1 ? '' : data.id
      this.handleQuery()
    },
    syncUserFn() {
      api.syncUser().then((res) => {
        this.$message.success(res.data || res.msg || '操作成功')
        this.getTableListFn()
      })
    },
    rowStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '姓名') {
        return 'color:#082aff'
      }
    }
  }
}
</script>

<template>
  <div style="background-color: white; height: 100%">
    <el-row justify="space-between" type="flex">
      <!--部门数据-->
      <el-col :span="5" class="specail-tree">
        <div class="head-container">
          <!-- <div>部门架构</div> -->
          <el-tree :default-expanded-keys="idArr" ref="tree" :data="treeData" :expand-on-click-node="false"
            :props="defaultProps" class="left-tree" highlight-current @node-click="handleNodeClick">
            <div slot-scope="{ node }" class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="19" style="margin-top: 20px; margin-left: 20px; margin-right: 20px">
        <NormalForm :isShowCard="false" pageTitle="登录日志" :operateForm="queryForm" :formList="formList" @specialSearch="handleQuery">
          <template slot="more-btn">
            <div class="ar mb15">
              <span class="specail-tip">同步成员需要较长时间，请耐心等待</span>
              <el-button v-hasPermi="['admin:user:synchuser']" type="primary" @click="syncUserFn">同步成员</el-button>
            </div>
          </template>
        </NormalForm>
        <el-table v-loading="loading" :cell-style="rowStyle" :data="userList" height="580">
          <el-table-column align="center" label="序号" type="index" width="100" />
          <el-table-column label="姓名" prop="name" :show-overflow-tooltip="true" align="center" />
          <el-table-column align="center" label="手机号" prop="mobile" />
          <el-table-column align="center" label="邮箱" prop="email" />
          <el-table-column align="center" label="企业ID" prop="userId" width="160" />
          <el-table-column align="center" label="状态" prop="isActivate">
            <template slot-scope="scope">{{ statusActivate[scope.row.isActivate] }}</template>
          </el-table-column>
          <el-table-column align="center" label="部门" prop="departName" />
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.custom-tree-node {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}
.specail-tree{
  padding-top: 20px;
  border-right: 1px solid rgb(234, 232, 232);
  padding-right: 20px;
}
.specail-tip{
  font-size: 12px;
  padding-right: 15px;
  color: rgb(164, 162, 162);
}

::v-deep.el-form-item {
  padding: 0;
}
</style>
